<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组更新的问题</title>
</head>
<body>
<div id="app">
  <h1>人员信息</h1>
  <ul>
    <li v-for="item in students" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}     <button @click="searchById(item.id)">修改</button>
    <button @click="editData(item.id)">修改整个数据</button>
    </li>
  </ul>

  <div v-show="boxFlag">
    <p>编号：<input type="text" readonly v-model="students[editIndex].id"></p>
    <p>姓名：<input type="text"  v-model="students[editIndex].name"></p>
    <p>年龄：<input type="text"  v-model="students[editIndex].age"></p>
    <br>
    <button @click="editInfo(students[editIndex].id)">确定</button>
  </div>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    const vm=new Vue({
      el:"#app",
      data(){
        return{
          students:[
            {id:101,name:"张三",age:18},
            {id:102,name:"李四",age:18},
            {id:103,name:"王五",age:18}
          ],
          //展示修改面板参数
          boxFlag:false,
          //接收需要展示的信息的下标
          editIndex:0,
          //接收用户输入的名称和年龄数据
          age:0,
          name:""
        }
      },
      methods:{
        //获取选中的数据
        searchById(id){
          const index=this.students.findIndex(student=>student.id===id)
          this.editIndex= index
          this.boxFlag=true
        },
        editInfo(){
            this.boxFlag=false
        },
        editData(id){
          let arr=this.students.filter((s)=>{
           return s.id===id
          })
          // 方法为无效的方法，vue无法监听数据的变更，从而对页面进行渲染
          const index=this.students.findIndex(student=>student.id===id)
          // //创建一个新的对象，直接根据下标修改数组元素
          // this.students[index]={id:arr[0].id,name:"王五",age:33}

          //有效的方法
          //创建一个对象
          let obj={
            id:arr[0].id,
            name:"lili",
            age:80
          }
          //通过splice方法进行数组变更
          this.students.splice(index,1,obj)
        }
      }
    })
</script>
</body>
</html>
